<template>
  <view class="main-header">
    <text>{{ $t("安全分析") }}</text>
  </view>
  <view class="main-pingfen">
    <view class="identifylabelids-button">
      <view class="identifylabelids-button-item">
        <uv-button :custom-style="miniButton" :color="green_selected === id ? '#748ee2' : '#aaaaaa'" text="概览"
          @click="green_selected = id">
        </uv-button>
      </view>
      <view v-for="(v, i) in greenlist" :key="i" class="identifylabelids-button-item">
        <uv-button :custom-style="miniButton" :color="green_selected === v.id ? '#748ee2' : '#aaaaaa'" :text="v?.name"
          @click="green_selected = String(v.id)"></uv-button>
      </view>
    </view>
  </view>
  <view class="container">
    <slot :show="show && showgreen" id="mychart-dom-green" canvasId="mychart-green"
      :ec="{ onInit: (canvas: any, width: string | number, height: string | number, dpr: number) => setgreen(canvas, width, height, dpr) }">
    </slot>
  </view>
</template>

<script setup lang="ts">
import { miniButton } from "@/util/style";
import { computed, ref, shallowRef, watch } from "vue";
import { getchildrenlast } from "@/util";
//@ts-ignore
const echarts = require("../../wxcomponents/ec-canvas/echarts");
import { nextTick } from "vue";
interface Ip {
  id: string;
  list: Eps.identifylabelEntity[];
  change(
    identifycommentlabels: string[],
    p?: number,
    d?: number
  ): {
    xAxisdata: string[];
    name: string[];
    series: {
      value: number;
      type: string;
      date: string;
      name: string;
      color: string;
    }[][];
    data: {
      value: number;
      type: string;
      date: string;
      name: string;
      color: string;
    }[];
    parent: {
      count: number;
      name: string;
      id1: string | undefined;
      id2: string | undefined;
      value: number;
    }[];
    parent2: {
      count: number;
      name: string;
      id1: string | undefined;
      id2: string | undefined;
      value: number;
    }[];
  };
  show: boolean;
  shopdata: any[];
  _feedbackTime: string[];
  feedbackTime: string[];
}
import { navigateTo } from "@/util/navigator";
import dayjs from "dayjs";
import { useI18n } from "vue-i18n";
const $t = useI18n().t;
const chart = shallowRef();
const p = defineProps<Ip>();

const showgreen = ref(true);
const green_identifycommentlabels = ref<string[]>([]);

const green_selected = ref<string>(p.id);

const greenlist = computed(() => {
  const data = p.list
    .filter((c) => String(c.parentId) === p.id)
    .sort((a, b) => Number(a.orderNum) - Number(b.orderNum));
  return data;
});

function setoption() {
  green_identifycommentlabels.value = getchildrenlast(
    p.list.find((c) => String(c.id) === green_selected.value)?.children
  ).map((e) => e.id);
  if (green_selected.value === p.id) {
    const { parent, parent2, xAxisdata, series, name, data } = p.change(
      green_identifycommentlabels.value,
      2,
      1
    );
    const option = {
      graphic: [
        {
          // 将旋转过的 group 整体定位右下角：
          type: "group",
          right: "center", // 定位到右下角
          bottom: "center", // 定位到右下角
          width: 300,
          height: 256.8,
          children: [
            {
              // 将图片定位到最下方的中间：
              type: "image",
              left: "center", // 水平定位到中间
              bottom: "10%", // 定位到距离下边界 10% 处
              style: {
                image:
                  "https://mxzj-translate.oss-cn-chengdu.aliyuncs.com/catv2/public/_20231129144226.png",
                width: 300,
                height: 256.8,
              },
            },
            {
              type: "text",
              left: "center",
              top: 36,
              style: {
                text: parent[2]?.value,
                fontSize: 16,
                stroke: "#fff",
                fill: "#fff",
              },
            },
            {
              type: "text",
              left: "center",
              top: 144,
              style: {
                text: parent.map((e) => e.value).reduce((a, b) => a + b, 0),
                fontSize: 16,
                stroke: "#fff",
                fill: "#fff",
              },
            },
            {
              type: "text",
              left: 55,
              top: 162,
              style: {
                text: datastring(parent[1]?.value),
                fontSize: 16,
                fill: "#fff",
                stroke: "#fff",
              },
            },
            {
              type: "text",
              right: 60,
              top: 162,
              style: {
                text: datastring(parent[0]?.value),
                fontSize: 16,
                stroke: "#fff",
                fill: "#fff",
              },
            },
          ],
        },
      ],
    };

    return option;
  } else {
    const { parent, parent2, xAxisdata, series, name, data } = p.change(
      green_identifycommentlabels.value
    );
    const option = {
      color: [
        "#FD754C",
        "#cccccc",
        "#ee5253",
        "#5f27cd",
        "#10ac84",
        "#feca57",
        "#f368e0",
        "#00d2d3",
        "#341f97",
        "#576574",
      ],
      legend: {
        top: "top",
        left: "left",
        data: ["当前周期", "上一周期"],
        selected: {
          "上一周期": false  // 将 "Lowest" 设置为默认不选中
        }
      },
      title: false,
      tooltip: {
        trigger: "item",
        formatter: "{b} : {c} ",
      },
      xAxis: {
        type: "category",
        data: series[0].map((e) => e.name),
        show: false,
      },
      yAxis: {
        type: "value",
      },
      // dataZoom: [
      //     {
      //         preventDefaultMouseMove: false,
      //         moveOnMouseWheel: false,
      //         moveOnMouseMove: false,
      //         zoomOnMouseWheel: false,
      //         type: 'inside',
      //         start: 0,
      //         end: 100
      //     },
      //     {
      //         start: 0,
      //         end: 100,
      //         backgroundColor: '#fff',
      //         dataBackground: {
      //             lineStyle: {
      //                 color: '#FD754C',
      //             },
      //             areaStyle: {
      //                 color: '#FD754C',
      //             }
      //         },
      //         selectedDataBackground: {
      //             lineStyle: {
      //                 color: '#FD754C',
      //             },
      //             areaStyle: {
      //                 color: '#FD754C',
      //             }
      //         },
      //         fillerColor: '#FD754C30',
      //         showDetail: false,
      //         showDataShadow: false,
      //     }
      // ],
      series: [
        {
          name: "当前周期",
          data: series[0],
          type: "bar",
          sort: "descending",
          realtimeSort: true,
          label: {
            show: true,
            formatter: (value: any) => {
              if (value.value) {
                return value.name.split("").join("\n");
              }
              return "";
            },
            verticalAlign: "bottom",
            align: "left",
            position: "bottom",
            distance: -10,
            offset: [-5, 0],
            textBorderWidth: 0,
            textShadowBlur: 0,
          },
        },
        {
          name: "上一周期",
          data: series[1],
          type: "bar",
          label: {
            show: true,
            formatter: (value: any) => {
              if (value.value) {
                return value.name.split("").join("\n");
              }
              return "";
            },
            verticalAlign: "bottom",
            align: "left",
            position: "bottom",
            distance: -10,
            offset: [-5, 0],
            textBorderWidth: 0,
            textShadowBlur: 0,
          },
        },
      ],
    };
    return option;
  }
}
function click(e: any, type: string, selected?: string) {
  console.log(e);
  if (e.componentSubType == "bar") {
    const n = p.list.find((z) => z.name === e.name);
    if (n) {
      const identifylabelid = [String(n.id)];
      const _shopdata = p.shopdata.filter((z) =>
        identifylabelid.includes(z.identifylabelid)
      );
      uni.setStorageSync("shopdata", JSON.stringify(_shopdata));
      navigateTo(
        `/pages/publicsentiment/shopdata?type=ai&starttime=${p._feedbackTime[0]
        }&endtime=${dayjs(p.feedbackTime[1]).format(
          "YYYY-MM-DD"
        )}&identifylabelid=${identifylabelid.join(",")}`
      );
    }
  } else if (e.componentType == "markArea") {
    const n = p.list.find((z) => z.name === e.name);
    if (n) {
      green_selected.value = String(n.id);
    }
  }
}
function datastring(num: number) {
  const v = String(num).length;
  if (v === 1) {
    return `  ${num}  `;
  } else if (v === 2) {
    return `  ${num} `;
  } else if (v === 3) {
    return ` ${num} `;
  }
  return String(num);
}

function setgreen(
  canvas: any,
  width: string | number,
  height: string | number,
  dpr: number
) {
  chart.value = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr, // new
  });

  chart.value.setOption(setoption(), { notMerge: true });
  canvas.setChart(chart.value);
  chart.value.on("click", click);
  return chart.value;
}

watch(
  () => green_selected.value,
  (e) => {
    nextTick(() => {
      chart.value.setOption(setoption(), { notMerge: true });
    });
  }
);
</script>
